<template>
  <div class="first">
    <van-form ref="form">
      <van-cell-group :border="false">
        <div class="first-label">{{ t("login.firstemailLabel") }}</div>
        <van-field
          :border="false"
          class="dev-field"
          v-model="dataForm.email"
          name="email"
          :placeholder="t('login.emailmsg')"
          :rules="[{ required: true, message: t('login.emerrmsg'), validator }]"
        />
        <div class="first-label">{{ t("login.firstcodeLabel") }}</div>
        <van-field
          v-model="dataForm.code"
          type="number"
          name="code"
          class="dev-field"
          maxlength="10"
          :placeholder="t('login.codemsg')"
          :rules="[
            { required: true, message: t('login.codemsg') },
            { required: true, message: t('login.codemsg') },
          ]"
        >
          <template #button>
            <sendBtn
              slot="suffix"
              @click="onSend"
              ref="sendbtnRef"
              type="0"
              :email="dataForm.email"
            />
          </template>
        </van-field>
      </van-cell-group>
    </van-form>
    <div class="submit">
      <van-button
        round
        block
        type="primary"
        native-type="submit"
        @click="onNext"
        :loading="dataForm.loading"
      >
        {{ t("login.nextbtn") }}
      </van-button>
    </div>
  </div>
</template>
<script setup>
import sendBtn from "@/components/sendBtn";
import { ref, reactive } from "@vue/reactivity";
import { defineEmits } from "vue";
import { useI18n } from "vue-i18n";
import { sendEmailCode, verificationCode } from "@/api/user";
import { Toast } from "vant";
const { t } = useI18n();
const checked = ref(false);
const sendbtnRef = ref(null);
const validator = (val) => {
  let bol = /^(?![0-9a-zA-Z]+$)[a-zA-Z0-9~!@#$%^&*?_-]{6,12}$/.test(val);
  console.log(bol);
  return bol || true;
};
const numletter = (val) => /^(?![0-9]+$)(?![a-zA-Z]+$)[a-zA-Z0-9]{6,12}$/;
const validatorMessage = (val) =>
  /^(?![0-9a-zA-Z]+$)[a-zA-Z0-9~!@#$%^&*?_-]{6,12}$/;
const emit = defineEmits(["onNext"]);
const form = ref(null);
const dataForm = reactive({
  email: "",
  code: "",
  loading: false,
});
const sendLoading = ref(false); //发送验证码的btn load
async function onSend() {
  await form.value.validate("email");
  sendbtnRef.value.onSend();
}
// 下一步
async function onNext() {
  await form.value.validate();
  dataForm.loading = true;
  verificationCode(dataForm)
    .then((res) => {
      dataForm.loading = false;
      if (res.code == 200) {
        emit("onSubmit", { type: 1, isAdd: true, email: dataForm.email });
      } else {
        console.log(333);
      }
    })
    .catch((err) => {
      dataForm.loading = false;
      console.log(err);
    });
}
</script>
<style scoped lang="less">
.first {
  &-label {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: bold;
    color: var(--van-nav-bar-icon-color);
    line-height: 14px;
    margin-top: 25px;
  }
  .submit {
    margin: 20px 55px;
    text-align: center;
    &-text {
      color: var(--van-primary-color);
      text-decoration: underline;
      margin-top: 17px;
      cursor: pointer;
    }
  }
}
</style>
